home *** CD-ROM | disk | FTP | other *** search
/ Fantasy Artist 39 / Fantasy Artist - Issue 39.bin / global.css < prev    next >
Cascading Style Sheet File  |  2012-10-04  |  24KB  |  1,389 lines
  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4. html, body, div, span, applet, object, iframe,
  5. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  6. a, abbr, acronym, address, big, cite, code,
  7. del, dfn, em, font, img, ins, kbd, q, s, samp,
  8. small, strike, strong, sub, sup, tt, var,
  9. b, u, i, center,
  10. dl, dt, dd, ol, ul, li,
  11. fieldset, form, label, legend,
  12. table, caption, tbody, tfoot, thead, tr, th, td {
  13.     margin: 0;
  14.     padding: 0;
  15.     border: 0;
  16.     outline: 0;
  17.     font-size: 100%;
  18.     vertical-align: baseline;
  19. }
  20.  
  21. body {
  22.     line-height: 1;    
  23.     background: url('generic/timeline_background.jpg');
  24.     background-color: #FFF;
  25.     background-repeat:no-repeat;
  26.     font-size: 11px;    
  27.     font-family: Arial, Helvetica, sans-serif;
  28. }
  29.  
  30. blockquote, q {
  31.     quotes: none;
  32. }
  33. blockquote:before, blockquote:after,
  34. q:before, q:after {
  35.     content: '';
  36.     content: none;
  37. }
  38.  
  39. /* remember to define focus styles! */
  40. :focus {
  41.     outline: 0;
  42. }
  43.  
  44. /* remember to highlight inserts somehow! */
  45. ins {
  46.     text-decoration: none;
  47. }
  48.  
  49. del {
  50.     text-decoration: line-through;
  51. }
  52.  
  53. /* tables still need 'cellspacing="0"' in the markup */
  54.  
  55. table {
  56.     border-collapse: collapse;
  57.     border-spacing: 0;
  58. }
  59.  
  60. /* this sets the colour of a link once it has been clicked on */
  61.  
  62. a, a:visited {
  63.     color: #000;
  64.     text-decoration: none;
  65. }
  66.  
  67. /* This will change the rollover colour for the disc menu links */
  68.  
  69. a:hover {
  70.     color: #ebeaea;
  71. }
  72.  
  73. /* these are the text headings set for the disc - they can be applied to text in the HTML pages */
  74.  
  75. h1 {
  76.     color: #fff;
  77.     font-family: Arial, Helvetica, sans-serif;
  78.     font-size: 33px;
  79.     font-weight: bold;
  80.     line-height: 1.1em;
  81. }
  82.  
  83. h2 {
  84. color:#FFFFFF;
  85.     font-family: Arial, Helvetica, sans-serif;
  86.     font-size: 20px;
  87.     line-height: 1.2em;
  88. }
  89.  
  90. h3 {
  91.     font-family: Arial, Helvetica, sans-serif;
  92.     font-size: 14px;
  93.     font-weight: bold;
  94.     line-height: 1.4em;
  95.     margin: 0.7em 0;
  96.     color: #343434;;
  97. }
  98.  
  99. h4 {
  100.     font-family: Arial, Helvetica, sans-serif;    
  101.     font-size: 12px;
  102.     font-weight: boldl;
  103.     line-height: 1.2em;
  104. }
  105.  
  106. h6 {
  107.     color: #888;
  108.     font-family: Arial, Helvetica, sans-serif;
  109.     font-size: 11px;
  110.     font-weight: normal;
  111.     line-height: 1.2em;
  112. }
  113.  
  114. p {
  115.     margin-bottom: 1em;
  116.     font-family: Arial, Helvetica, sans-serif;
  117.     font-size: 11px;
  118.     line-height: 1.1em;
  119. }
  120.  
  121.  
  122. /* this is the main 'digital discs' header image */
  123.  
  124. #mainHeader {
  125.     display: block;
  126.     margin: 0 auto;
  127.     z-index: 10;
  128. }
  129.  
  130. /* these are the imagine links at the top of the page */
  131.  
  132. #mainMenu {
  133.     font-size: 10px;
  134.     list-style: none;
  135.     margin: 10px auto;
  136.     padding: 10px 10px;
  137.     overflow: auto;
  138.     width: 960px;
  139.     background-color:#333333;
  140.     background-image: -webkit-linear-gradient(top, #2F2727, #555555);
  141.      background-image:    -moz-linear-gradient(top, #2F2727, #555555);
  142.       background-image:     -ms-linear-gradient(top, #2F2727, #555555);
  143.       background-image:      -o-linear-gradient(top, #2F2727, #555555);
  144.     border-radius:15px 15px 15px 15px;
  145.     height:30px;
  146.     padding: 1px 0px;
  147.     margin: 0    px auto;
  148.     display:block;
  149.     -moz-box-shadow: 0px 0px 12px #5f5f5f;
  150.     -webkit-box-shadow: 0px 0px 12px #5f5f5f;
  151.     background-image:url(generic/Main_menu_bg.png);
  152. }
  153.  
  154. /* this sets the dividers between the links and spaces them out */
  155.  
  156. #mainMenu li {
  157.     display:inline;
  158.     -webkit-transition: color 0.25s linear;
  159.     color: #000;
  160.     font-family: Arial, Helvetica, sans-serif;
  161.     font-size: 11px;
  162.     font-weight: normal;
  163.     line-height: 1.2em;
  164.     float: left;
  165.     padding: 0 35px;
  166.     margin-top: 10px;
  167. }
  168.  
  169. #mainMenu li a {
  170. color:#fff;
  171. }
  172.  
  173. /* This will change the rollover colour for the imagine links */
  174.  
  175. #mainMenu li a:hover {
  176.     color: #999;
  177. }
  178.  
  179. /* this is the header image for the disc */
  180.  
  181. #discHeader {
  182.     clear: left;
  183.     display: block;
  184.     margin: 0 auto;
  185.     position: relative;
  186.     z-index: 100;
  187. }
  188.  
  189. /* this is the content box for the whole disc interface - shadow is controlled below */
  190.  
  191. #discContent {
  192.     -moz-box-shadow: 0px 0px 12px #5f5f5f;
  193.     -webkit-box-shadow: 0px 0px 12px #5f5f5f;
  194.     overflow: hidden;
  195.     margin: 0 auto;
  196.     width: 960px;
  197. }
  198.  
  199. /* this is the left hand menu for the pages of the disc (the disc menu title is a jpg image and needs re-exporting for changes) */
  200.  
  201. #discMenu {
  202.     -moz-box-shadow: 3px 0 5px #303030;
  203.     -webkit-box-shadow: 3px 0 5px #303030;
  204.     box-shadow: 3px 0 5px #303030;
  205.     background: url('generic/disc_menu.png') #ccc;
  206.     float: left;
  207.     height: 500px;
  208.     margin: -15px 0 0 0;
  209.     padding: 20px 0 0 0;
  210.     position: relative;
  211.     width: 140px;
  212.     z-index: 50;
  213. }
  214.  
  215. /* this removes unwanted bullet points from the list */
  216.  
  217. #discMenu li {
  218.     list-style: none;
  219.     margin: 0 0 0 5px;
  220.     color: #343434;
  221. }
  222.  
  223. /* these are to set the styling and spacing of the disc menu text */
  224.  
  225. #discMenu h3 {
  226.     -webkit-transition: color 0.25s linear;
  227.     margin: 0px 0px 0px 0px;
  228.     padding-top: 5px;
  229.     font-family: Arial, Helvetica, sans-serif;    
  230.     font-size: 12px;
  231.     font-weight: bold;
  232.     line-height: 1.4em;
  233.     
  234. }
  235.  
  236. #discMenu p {
  237.     -webkit-transition: color 0.25s linear;
  238.     font-weight: normal;
  239.     margin-left: 8px;
  240.     font-size: 11px;
  241.     font-family: Arial, Helvetica, sans-serif;
  242.     color: #343434;
  243. }
  244.  
  245. #discMenu a:hover h3,
  246. #discMenu a:hover p {
  247.     color: #CD9B1D;
  248. }
  249.  
  250. /* use these to move and control the colour of the welcome text */    
  251.  
  252. #welcome_text {
  253.     color: #ffffff;
  254.     padding: 5px 20px 0 5px;
  255.     width:280px;
  256. }
  257.  
  258.  
  259.  
  260. #welcome_text a  {
  261.     color: #dceaff;
  262.     font-weight: bold;
  263. }
  264.  
  265.  
  266.  
  267. #welcome_text a:hover {
  268.     color: #fdfcea;
  269. }
  270.  
  271.  
  272.     
  273. /* changes text in the lists on the back issues page */    
  274.  
  275. #back_issues li {
  276.     margin: 15px 15px 15px 15px;
  277. }
  278.  
  279. /* use this to move the back issues image around the page */
  280.  
  281. #back_issues_mag {
  282.     margin: 15px 0 0 55px;
  283.     padding: 5px
  284. }
  285.  
  286. /* Podcasts */    
  287.  
  288. .podcasts li {
  289.     display: block;
  290.     height: 90px;
  291.     margin: 25px 0;
  292. }
  293.  
  294. .podcasts img {
  295.     -moz-box-shadow: 5px 3px 10px #000;
  296.     -webkit-box-shadow: 0px 0px 6px #454545;
  297.     filter: alpha(opacity=100);
  298.     float: left;
  299.     margin-right: 20px;
  300.     opacity: 1;
  301. }
  302.  
  303. .podcasts img:hover {
  304.     filter: alpha(opacity=70);
  305.     opacity: .7;
  306. }
  307.  
  308. .podcasts .actionLink {
  309.     margin-bottom: 0;
  310. }
  311.  
  312. /* Play Button */
  313.  
  314. #largeplaybutton {
  315.     padding: 200px 0 0 180px;
  316. }
  317.  
  318. /* This moves the credits tool tip link */
  319.  
  320. #information {
  321.     margin: 10px auto;
  322.     width: 960px;
  323.     text-align: right;
  324.     padding: 5px 0 0 0;
  325.     font-weight: plain;
  326. }
  327.  
  328.  
  329. /* This will change the rollover colour for the credits link */
  330.  
  331. #creditLink:hover {
  332.     color: grey;
  333. }
  334.  
  335. /* Content */
  336.  
  337. #backgroundPane {
  338.     float: left;
  339.     height: 520px;
  340.     margin: -15px 0 0 0;
  341.     padding: 0px;
  342.     width: 820px;
  343. }
  344.  
  345. #contentPane {
  346.     border-radius:8px;
  347.     box-shadow: 3px 0px 5px #303030;
  348.     -moz-border-radius-topright: 8px;
  349.     -moz-border-radius-bottomright: 8px;
  350.     -webkit-border-top-right-radius: 8px;
  351.     -webkit-border-bottom-right-radius: 8px;
  352.     -moz-box-shadow: 3px 0 5px #303030;
  353.     -webkit-box-shadow: 3px 0 5px #303030;
  354.     float: left;
  355.     height: 465px;
  356.     margin: 15px 0 10px 0;
  357.     overflow: hidden;
  358.     padding: 15px;
  359.     position: absolute;
  360.     opacity: 0;
  361.     width: 0;
  362. }
  363.  
  364. #middlePane {
  365.     width:740px;
  366.     margin-left: 30px;
  367.     margin-top: 30px;
  368.     text-align: center;
  369. }
  370.  
  371. #staticPane {
  372.     float: left;
  373.     height: 520px;
  374.     overflow: hidden;
  375.     position: absolute;
  376.     width: 364px;
  377.     color: #dddddd;
  378.     display: none;
  379. }
  380.  
  381. #contentPane p {
  382.     font-weight: normal;
  383.     font-family: Arial, Helvetica, sans-serif;
  384.     font-size: 11px;
  385.     line-height: 1.2em;
  386.     margin: 0.7em 0;
  387. }
  388.  
  389. #contentPane ul,
  390. #contentPane ol {
  391.     font-family: Arial, Helvetica, sans-serif;
  392.     font-size: 11px;
  393.     line-height: 1.2em;
  394.     margin-left: 30px;
  395. }
  396.  
  397. #placeHolder {
  398.     float: right;
  399.     height: 100%;
  400.     overflow: hidden;
  401.     width: 285px;
  402.     margin: 0 0 0 0;
  403. }
  404.  
  405.  
  406. #previewPane {
  407.     height: 475px;
  408.     margin: 15px 0 10px 330px;
  409.     padding: 10px;
  410.     position: absolute;
  411.     width: 460px;
  412.     
  413.     display: none;
  414. }
  415.  
  416. #videoPane {
  417.     float: left;
  418.     height: 520px;
  419.     margin-top: -15px;
  420.     width: 820px;
  421. }
  422.  
  423.  
  424. /* gallery rollovers */
  425.  
  426. .view {
  427.    width: 193px;
  428.    height: 161px;
  429.    margin: 10px;
  430.    float: left;
  431.    border: 3px solid #fff;
  432.    overflow: hidden;
  433.    position: relative;
  434.    text-align: center;
  435.    -webkit-box-shadow: 1px 1px 2px #e6e6e6;
  436.    -moz-box-shadow: 1px 1px 2px #e6e6e6;
  437.    box-shadow: 1px 1px 2px #e6e6e6;
  438.    cursor: default;
  439.  
  440. }
  441. .view .mask,.view .content {
  442.    width: 193px;
  443.    height: 161px;
  444.    position: absolute;
  445.    overflow: hidden;
  446.    top: 0;
  447.    left: 0;
  448. }
  449. .view img {
  450.    display: block;
  451.    position: relative;
  452. }
  453. .view h2 {
  454.    text-transform: uppercase;
  455.    color: #fff;
  456.    text-align: center;
  457.    position: relative;
  458.    font-size: 16px;
  459.    padding: 0px;
  460.    background: rgba(0, 0, 0, 0.8);
  461.  
  462. }
  463. .view p {
  464.    font-family: Georgia, serif;
  465.    font-style: italic;
  466.    font-size: 12px;
  467.    position: relative;
  468.    color: #fff;
  469.    padding: 5px 0px 0px;
  470.    text-align: center;
  471. }
  472. .view a.info {
  473.    display: inline-block;
  474.    text-decoration: none;
  475.    padding: 7px 10px;
  476.    background: #000;
  477.    color: #fff;
  478.    text-transform: uppercase;
  479.    -webkit-box-shadow: 0 0 1px #000;
  480.    -moz-box-shadow: 0 0 1px #000;
  481.    box-shadow: 0 0 1px #000;
  482.    border: 2px solid #e4bd64;
  483. }
  484. .view a.info: hover {
  485.    -webkit-box-shadow: 0 0 5px #000;
  486.    -moz-box-shadow: 0 0 5px #000;
  487.    box-shadow: 0 0 5px #000;
  488. }
  489.  
  490. .view-tenth img {
  491.    -webkit-transform: scaleY(1);
  492.    -moz-transform: scaleY(1);
  493.    -o-transform: scaleY(1);
  494.    -ms-transform: scaleY(1);
  495.    transform: scaleY(1);
  496.    -webkit-transition: all 0.7s ease-in-out;
  497.    -moz-transition: all 0.7s ease-in-out;
  498.    -o-transition: all 0.7s ease-in-out;
  499.    -ms-transition: all 0.7s ease-in-out;
  500.    transition: all 0.7s ease-in-out;
  501. }
  502. .view-tenth .mask {
  503.    background-color: rgba(199, 169, 95, 0.3);
  504.    -webkit-transition: all 0.5s linear;
  505.    -moz-transition: all 0.5s linear;
  506.    -o-transition: all 0.5s linear;
  507.    -ms-transition: all 0.5s linear;
  508.    transition: all 0.5s linear;
  509.    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  510.    filter: alpha(opacity=0);
  511.    opacity: 0;
  512. }
  513. .view-tenth h2 {
  514.    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  515.    background: transparent;
  516.    margin: 20px 40px 0px 40px;
  517.    -webkit-transform: scale(0);
  518.    -moz-transform: scale(0);
  519.    -o-transform: scale(0);
  520.    -ms-transform: scale(0);
  521.    transform: scale(0);
  522.    color: #333;
  523.    -webkit-transition: all 0.5s linear;
  524.    -moz-transition: all 0.5s linear;
  525.    -o-transition: all 0.5s linear;
  526.    -ms-transition: all 0.5s linear;
  527.    transition: all 0.5s linear;
  528.    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  529.    filter: alpha(opacity=0);
  530.    opacity: 0;
  531. }
  532. .view-tenth p {
  533.    color: #333;
  534.    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  535.    filter: alpha(opacity=0);
  536.    opacity: 0;
  537.    -webkit-transform: scale(0);
  538.    -moz-transform: scale(0);
  539.    -o-transform: scale(0);
  540.    -ms-transform: scale(0);
  541.    transform: scale(0);
  542.    -webkit-transition: all 0.5s linear;
  543.    -moz-transition: all 0.5s linear;
  544.    -o-transition: all 0.5s linear;
  545.    -ms-transition: all 0.5s linear;
  546.    transition: all 0.5s linear;
  547. }
  548. .view-tenth a.info {
  549.    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  550.    filter: alpha(opacity=0);
  551.    opacity: 0;
  552.    -webkit-transform: scale(0);
  553.    -moz-transform: scale(0);
  554.    -o-transform: scale(0);
  555.    -ms-transform: scale(0);
  556.    transform: scale(0);
  557.    -webkit-transition: all 0.5s linear;
  558.    -moz-transition: all 0.5s linear;
  559.    -o-transition: all 0.5s linear;
  560.    -ms-transition: all 0.5s linear;
  561.    transition: all 0.5s linear;
  562. }
  563. .view-tenth:hover img {
  564.    -webkit-transform: scale(10);
  565.    -moz-transform: scale(10);
  566.    -o-transform: scale(10);
  567.    -ms-transform: scale(10);
  568.    transform: scale(10);
  569.    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  570.    filter: alpha(opacity=0);
  571.    opacity: 0;
  572. }
  573. .view-tenth:hover .mask {
  574.    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  575.    filter: alpha(opacity=100);
  576.    opacity: 1;
  577. }
  578. .view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
  579.    -webkit-transform: scale(1);
  580.    -moz-transform: scale(1);
  581.    -o-transform: scale(1);
  582.    -ms-transform: scale(1);
  583.    transform: scale(1);
  584.    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  585.    filter: alpha(opacity=100);
  586.    opacity: 1;
  587. }
  588.  
  589.  
  590.  
  591.  
  592.  
  593. #galleryPane {
  594.     float: right;
  595.     height: 520px;
  596.     margin-top: 15px;
  597.     width: 485px;
  598. }
  599.  
  600. .gallery li {
  601.   text-align: center;
  602. display: -moz-inline-stack;
  603. display: inline-block;
  604. margin: 20px 13px 10px -2px;
  605. content: attr(title);
  606. position: relative;
  607. float: left;
  608. list-style: none;
  609. font-size: 13px;
  610.     
  611. }
  612.  
  613.  
  614. #footer {
  615.     background: url('generic/ip_logo.png') left center no-repeat;
  616.     line-height: 1.3em;
  617.     margin: 0 auto;
  618.     padding: 0px 0 0px 50px;
  619.     width: 910px;
  620.     color: #fff;
  621.     font-family: Arial, Helvetica, sans-serif;
  622.     font-size: 11px;
  623.     font-weight: normal;
  624.     line-height: 1.2em;
  625.     
  626. }
  627.  
  628. .actionLink {
  629.     -webkit-transition: color 0.25s linear;
  630.     display: block;
  631.     font-size: 14px;
  632.     font-weight: bold;
  633.     margin: 8px 0;
  634.     text-align: center;
  635. }
  636.  
  637. .MacAppLink {
  638.     -webkit-transition: color 0.25s linear;
  639.     display: block;
  640.     font-size: 12px;
  641.     font-weight: bold;
  642.     text-align: left;
  643.     color: #cdcdcd;
  644. }
  645.  
  646.  
  647. /* This is to style the tool tip for the credits */
  648.  
  649. .tooltip {
  650.     border-bottom: 1px dotted #fff; color: #fff; outline: none;
  651.     text-decoration: none;
  652.     position: relative;
  653. }
  654.  
  655. .tooltip:hover {
  656.     border-bottom: 1px dotted #999; color: #999; outline: none;
  657.     text-decoration: none;
  658.     position: relative;
  659. }
  660.  
  661. .tooltip span {
  662.     margin-left: -999em;
  663.     position: absolute;
  664. }
  665.  
  666. .tooltip:hover span {
  667.     border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
  668.     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  669.     font-family: Arial, Helvetica, sans-serif;
  670.     position: absolute; right: 1em; bottom: 3.3em; z-index: 99;
  671.     margin-left: 0; width: 190px;
  672. }
  673.  
  674. .tooltip:hover img {
  675.     border: 0; 
  676.     margin: 0px 4px 0px 0px; 
  677.     padding:3px;
  678.     float: left;
  679. }
  680.  
  681. .tooltip:hover em {
  682.     font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; font-weight: plain; color: #000;
  683.     display: block; padding: 0.2em 0 0.6em 0; text-align: left; 
  684. }
  685.     
  686. .custom { padding: 0.5em 0.8em 0.2em 0.2em; }
  687. .info { background: white; border: 2px solid #c33424;    }
  688.         
  689. /* Video fader */
  690.  
  691. .videoButton {
  692.     background-position: top;
  693.     cursor: pointer;
  694.     display:block;
  695.     position: relative;
  696. }
  697.  
  698. .videoButton div {
  699.     background-position: bottom;
  700.     height: 100%;
  701.     opacity: 0;
  702.     position: absolute;
  703.     width: 100%;
  704. }
  705.  
  706. .videoButton.small {
  707.     height: 46px;
  708.     width: 258px;
  709.     clear: left;
  710.     display: block;
  711.     overflow: auto;
  712.     margin-top: 6px;
  713. }
  714.  
  715. .videoButton.large {
  716.     height: 62px;
  717.     margin: 0 0 0 0;
  718.     width: 248px;
  719. }
  720.  
  721. .tutorialLink {
  722.     clear: left;
  723.     display: block;
  724.     overflow: auto;
  725.     margin-top: 11px;
  726. }
  727.  
  728. .tutorialLink img {
  729.     float: left;
  730.     margin-right:10px;
  731.     border-style:solid;
  732.     border-width:1px;
  733.     border-color:#333333;
  734. }
  735.  
  736. .tutorialLink img:hover {
  737.     float: left;
  738.     margin-right:10px;
  739.     border-style:solid;
  740.     border-width:1px;
  741.     border-color:#FFF;
  742. }
  743.  
  744. /* DISCLAIMER */
  745.  
  746. #discWelcome {
  747.     -moz-box-shadow: 0px 0px 30px #0e0e0e;
  748.     -webkit-box-shadow: 0px 0px 30px #0e0e0e;
  749.     overflow: hidden;
  750.     position: relative;
  751.     height: 580px;
  752.     margin: 0 auto;
  753.     width: 960px;
  754. }
  755.  
  756. #discWelcome video,
  757. #discWelcome .container,
  758. #discWelcome > img {
  759.     position: absolute;
  760.     height: 580px;
  761.     width: 960px;
  762. }
  763.  
  764. #discWelcome video {
  765.     background: #fff;
  766. }
  767.  
  768. .contentBox {
  769.     background: #fff;
  770.     -moz-box-shadow: 0px 0px 30px #0e0e0e;
  771.     -webkit-box-shadow: 0px 0px 30px #0e0e0e;
  772.     _height: 480px;
  773.     margin: 50px auto 0 auto;
  774.     max-height: 500px;
  775.     min-height: 480px;
  776.     overflow: auto;
  777.     padding: 0 20px;
  778.     text-align: center;
  779.     width: 660px;
  780. }
  781.  
  782. .contentBox h1 {
  783.     background: #333;
  784.     display: block;
  785.     margin: 0 -20px 20px -20px;
  786.     padding: 10px 0;
  787.     text-align: center;
  788. }
  789.  
  790. .contentBox p {
  791.     font-size: 10px;
  792.     line-height: 1.4em;
  793.     margin-bottom: 1.4em;
  794.     text-align: left;
  795. }
  796.  
  797. .contentBox h2 {
  798.     font-size: 14px;
  799.     line-height: 28px;
  800.     text-align: left;
  801. }
  802.  
  803. .contentBox a {
  804.     display: inline-block;
  805.     display: -moz-inline-box;
  806.     font-size: 14px;
  807.     font-weight: bold;
  808.     margin: 14px 25px 0 25px;
  809.     -webkit-transition: color 0.25s linear;
  810. }
  811.  
  812. dl {
  813.     font-size: 10px;
  814.     margin-bottom: 1em;
  815. }
  816.  
  817. dt, dd {
  818.     font-family: Arial, Helvetica, sans-serif;
  819.     font-size: 11px;
  820.     line-height: 1em;
  821.     text-align: left;
  822. }
  823.  
  824. dt {
  825.     clear: left;
  826.     float: left;
  827.     font-weight: bold;
  828.     width: 115px;
  829. }
  830.  
  831. dt:after {
  832.     content: " - ";
  833. }
  834.  
  835. /* Box outs */
  836.  
  837. #icreatelabelarrow {
  838.     height: 300px; 
  839.     width: 200px;
  840.     background-image:url(generic/white_arrow.png); 
  841.     background-position: right 40px; 
  842.     background-repeat:no-repeat; 
  843.     display: none;
  844.     padding: 20px 0 0 0; 
  845.     
  846. }
  847. #icreatelabelbox {
  848.  
  849. width: 160px; 
  850. /* border: 1px solid black;*/
  851. border-radius: 10px;
  852. -moz-border-radius: 10px; 
  853. padding: 0;
  854. background-image: url(generic/background.png);
  855. -webkit-box-shadow: 2px 2px 5px #3d3d3d;
  856. -moz-box-shadow: 3px 3px 5px #3d3d3d;
  857. }
  858.  
  859. #icreatelabelbox h3 {
  860.     background:url(generic/blue_circle.png) 5px 5px no-repeat; 
  861.     padding: 4px 0 0 25px; 
  862.     margin: 0; 
  863.     font-size; 11px;
  864.     
  865. }
  866.  
  867. #icreatelabelbox p {
  868.     margin: 0; 
  869.     padding: 5px 8px 10px 8px; 
  870.     line-height: 13px;
  871.     
  872. }
  873.  
  874. #icreatevideobox {
  875.  
  876. width: 350px; 
  877. height: 13px;
  878. /* border: 1px solid black;*/
  879. border-radius: 10px;
  880. -moz-border-radius: 10px; 
  881. padding: 5;
  882. background-image: url(generic/background.png);
  883. -webkit-box-shadow: 0px 0px 30px #0e0e0e;
  884. -moz-box-shadow: 0px 0px 30px #0e0e0e;
  885. }
  886.  
  887.  
  888. /*
  889.     UTILITY STYLES (TUTORIAL FILES)
  890. */                                    
  891.                                         
  892. .floatLeft                                     { float: left; margin-right: 10px;}
  893. .floatRight                                    { float: right; }
  894. .clear                                         { clear: both; }
  895. a                                            { outline: none; }
  896.  
  897. #thumbs img {
  898.       
  899.       opacity: 1;
  900.        overflow:hidden;
  901.       -webkit-box-shadow: 0px 0px 6px #565656;
  902.       -moz-box-shadow: 0px 0px 6px #565656;
  903.       box-shadow: 0px 0px 6px #565656;
  904.     
  905.       
  906. }
  907.  
  908. /* Creates opacity rollover effect for app images */    
  909.  
  910. #thumbs img:hover {
  911.  
  912.     opacity: .8;
  913.     filter: alpha (opacity=100);
  914.  
  915. }
  916.  
  917. #thumb1,
  918. #thumb2,
  919. #thumb3,
  920. #thumb4,
  921. #thumb5, 
  922. #thumb6,
  923. #thumb7,
  924. #thumb8,
  925. #thumb9,
  926. #thumb10,
  927. #thumb11,
  928. #thumb12,
  929. #thumb13,
  930. #thumb14,
  931. #thumb15
  932.  {
  933.     float: left;
  934.     text-align: center; width: 70px;
  935.     font-size: 11px;
  936.  
  937.     
  938. }
  939.  
  940. #thumb1{
  941.     margin-top: 10px;
  942.     margin-left: 0px;
  943. }
  944.  
  945. #thumb2{
  946.     margin-top: 10px;
  947.     margin-left: 0px;
  948. }
  949.  
  950. #thumb3{
  951.     margin-top: 10px;
  952.     margin-left: 0px;
  953. }
  954.  
  955. #thumb4{
  956.     margin-top: 10px;
  957.     margin-left: 0px;
  958.     
  959. }
  960.  
  961. #thumb5 {
  962.     margin-top: 10px;
  963.     margin-left: 0px;
  964. }
  965.  
  966. #thumb6 {
  967.     margin-top: 10px;
  968.     margin-left: 0px;
  969. }
  970.  
  971. #thumb7 {
  972.     margin-top: 10px;
  973.     margin-left: 0px;
  974. }
  975.  
  976. #thumb8 {
  977.     margin-top: 10px;
  978.     margin-left: 0px;
  979. }
  980.  
  981. #thumb9 {
  982.     margin-top: 10px;
  983.     margin-left: 0px;
  984. }
  985.  
  986. #thumb10 {
  987.     margin-top: 10px;
  988.     margin-left: 0px;
  989. }
  990.  
  991. #thumb11 {
  992.     margin-top: 10px;
  993.     margin-left: 0px;
  994. }
  995.  
  996. #thumb12 {
  997.     margin-top: 10px;
  998.     margin-left: 0px;
  999. }
  1000.  
  1001. #thumb13 {
  1002.     margin-top: 10px;
  1003.     margin-left: 0px;
  1004. }
  1005.  
  1006. #thumb14 {
  1007.     margin-top: 10px;
  1008.     margin-left: 0px;
  1009. }
  1010.  
  1011. #thumb15 {
  1012.     margin-top: 10px;
  1013.     margin-left: 0px;
  1014. }
  1015.  
  1016.  
  1017. /*
  1018.     UTILITY STYLES (STOCK IMAGES)
  1019. */                                    
  1020.                                         
  1021. .floatLeft                                     { float: left; margin-right: 10px;}
  1022. .floatRight                                    { float: right; }
  1023. .clear                                         { clear: both; }
  1024. a                                            { outline: none; }
  1025.  
  1026. #stockthumbs img {
  1027.       
  1028.       opacity: .8;
  1029.       -moz-border-radius: 5px; 
  1030.       -webkit-border-radius: 5px; 
  1031.       border-radius: 5px;
  1032.       -webkit-box-shadow: 0px 0px 6px #565656;
  1033.       -moz-box-shadow: 0px 0px 6px #565656;
  1034.       box-shadow: 0px 0px 6px #565656;
  1035.           
  1036. }
  1037.  
  1038. /* Creates opacity rollover effect for app images */    
  1039.  
  1040. #thumbs img:hover {
  1041.  
  1042.     opacity: 1;
  1043.     filter: alpha (opacity=100);
  1044.  
  1045. }
  1046.  
  1047. #thumb1,
  1048. #thumb2,
  1049. #thumb3,
  1050. #thumb4,
  1051. #thumb5, 
  1052. #thumb6,
  1053. #thumb7,
  1054. #thumb8,
  1055. #thumb9,
  1056. #thumb10,
  1057. #thumb11,
  1058. #thumb12,
  1059. #thumb13,
  1060. #thumb14,
  1061. #thumb15,
  1062. #thumb16,
  1063. #thumb17,
  1064. #thumb18,
  1065. #thumb19,
  1066. #thumb20
  1067.  {
  1068.     float: left;
  1069.     text-align: center; width: 70px;
  1070.     font-size: 11px;
  1071.  
  1072.     
  1073. }
  1074.  
  1075. #thumb1{
  1076.     margin-top: 10px;
  1077.     margin-left: 0px;
  1078. }
  1079.  
  1080. #thumb2{
  1081.     margin-top: 10px;
  1082.     margin-left: 0px;
  1083. }
  1084.  
  1085. #thumb3{
  1086.     margin-top: 10px;
  1087.     margin-left: 0px;
  1088. }
  1089.  
  1090. #thumb4{
  1091.     margin-top: 10px;
  1092.     margin-left: 0px;
  1093.     
  1094. }
  1095.  
  1096. #thumb5 {
  1097.     margin-top: 10px;
  1098.     margin-left: 0px;
  1099. }
  1100.  
  1101. #thumb6 {
  1102.     margin-top: 10px;
  1103.     margin-left: 0px;
  1104. }
  1105.  
  1106. #thumb7 {
  1107.     margin-top: 10px;
  1108.     margin-left: 0px;
  1109. }
  1110.  
  1111. #thumb8 {
  1112.     margin-top: 10px;
  1113.     margin-left: 0px;
  1114. }
  1115.  
  1116. #thumb9 {
  1117.     margin-top: 10px;
  1118.     margin-left: 0px;
  1119. }
  1120.  
  1121. #thumb10 {
  1122.     margin-top: 10px;
  1123.     margin-left: 0px;
  1124. }
  1125.  
  1126. #thumb11 {
  1127.     margin-top: 10px;
  1128.     margin-left: 0px;
  1129. }
  1130.  
  1131. #thumb12 {
  1132.     margin-top: 10px;
  1133.     margin-left: 0px;
  1134. }
  1135.  
  1136. #thumb13 {
  1137.     margin-top: 10px;
  1138.     margin-left: 0px;
  1139. }
  1140.  
  1141. #thumb14 {
  1142.     margin-top: 10px;
  1143.     margin-left: 0px;
  1144. }
  1145.  
  1146. #thumb15 {
  1147.     margin-top: 10px;
  1148.     margin-left: 0px;
  1149. }
  1150.  
  1151. #thumb16 {
  1152.     margin-top: 10px;
  1153.     margin-left: 0px;
  1154. }
  1155.  
  1156. #thumb17 {
  1157.     margin-top: 10px;
  1158.     margin-left: 0px;
  1159. }
  1160.  
  1161. #thumb18 {
  1162.     margin-top: 10px;
  1163.     margin-left: 0px;
  1164. }
  1165.  
  1166. #thumb19 {
  1167.     margin-top: 10px;
  1168.     margin-left: 0px;
  1169. }
  1170.  
  1171. #thumb20 {
  1172.     margin-top: 10px;
  1173.     margin-left: 0px;
  1174. }
  1175.  
  1176.  
  1177. /*
  1178. SLIDER
  1179. */
  1180.         
  1181.  
  1182. .panel ul                                    { text-align: left; margin: 0 15px 0 30px; }
  1183. .stripViewer                                { position: relative; margin-top: 12px; overflow: hidden; width: 450px; height: 450px; }
  1184. .stripViewer .panelContainer                { position: relative; left: 0; }
  1185. .stripViewer .panelContainer .panel            { float: left; height: 100%; position: relative; width: 450px; }
  1186. .stripNavL, .stripNavR, .stripNav            { display: none; }
  1187.  
  1188.  
  1189. .photo-meta-data                            { background: url(generic/transpBlack.png); padding: 5px; height: 20px; 
  1190.                                               margin-top: -100px; position: relative; z-index: 80; color: white; }
  1191. .photo-meta-data span                         { font-size: 13px; }
  1192. .cross-link                                    { display: block; width: 62px; margin-top: -14px; 
  1193.                                               position: relative; padding-top: 15px; z-index: 102; }
  1194.  
  1195. /*
  1196.     PAGE STRUCTURE
  1197. */
  1198. #page-wrap                                     { width: 500px; margin: 25px auto; position: relative; min-height: 500px;
  1199.                                               background: url(images/bg.png) top center; }
  1200.  
  1201. #tutpaneLeft {
  1202.     margin: 75px 20px 0 40px;
  1203.     float: left;
  1204.     height: 505px;
  1205.     padding: 0px;
  1206.     width: 370px;
  1207.     color:#fff;
  1208. }
  1209.  
  1210.  
  1211.  
  1212. #tutpaneRight {
  1213.     margin-top: 97px;
  1214.     float: left;
  1215.     height: 505px;
  1216.     width: 375px;
  1217.     
  1218.     
  1219. }
  1220.  
  1221. /* Quick search */    
  1222.  
  1223.    .tree {
  1224.     display: none;
  1225.     }
  1226.     
  1227.     
  1228.     .cat_panel a {
  1229.     line-height: 20px;
  1230.     color:#000;
  1231.     font-weight: bold;
  1232.     font-size: 12px;
  1233.     display: block;
  1234.     border-left-style:solid;
  1235.     border-width:2px;
  1236.     border-color:#0099CC;
  1237.     padding-left:4px;
  1238.     text-align:left;
  1239.     }
  1240.     
  1241.     .cat_panel a:hover {
  1242.         color:#c33424;
  1243.         }
  1244.     
  1245.     .cat_panel:first-child {
  1246.         width: 140px; float: left; height: 350px;  overflow-y: auto; list-style-type:none;
  1247.     }
  1248.     
  1249.     .cat_panel:last-child {
  1250.         width: 350px; float: left; height: 350px;  overflow-y: auto; list-style-type:none;
  1251.     }
  1252.     
  1253.     .cat_panel {
  1254.         width: 130px; float: left; height: 330px;  overflow-y: auto; list-style-type:none;
  1255.     }
  1256.     
  1257.     
  1258. UTILITY STYLES (STOCK IMAGES)
  1259. */                                    
  1260.                                         
  1261. .floatLeft                                     { float: left; margin-right: 10px;}
  1262. .floatRight                                    { float: right; }
  1263. .clear                                         { clear: both; }
  1264. a                                            { outline: none; }
  1265.  
  1266. #stockthumbs img {
  1267.       
  1268.       opacity: .8;
  1269.       -moz-border-radius: 5px; 
  1270.       -webkit-border-radius: 5px; 
  1271.       border-radius: 5px;
  1272.       -webkit-box-shadow: 0px 0px 6px #565656;
  1273.       -moz-box-shadow: 0px 0px 6px #565656;
  1274.       box-shadow: 0px 0px 6px #565656;
  1275.           
  1276. }
  1277.  
  1278.  
  1279. #pages_sticker {
  1280.     margin-left:755px;
  1281.     margin-top:-85px;
  1282.     position: absolute;
  1283.     z-index:100;
  1284. }
  1285.  
  1286. #fade { /*--Transparent background layer--*/
  1287.     display: none; /*--hidden by default--*/
  1288.     background: #000;
  1289.     position: fixed; left: 0; top: 0;
  1290.     width: 100%; height: 100%;
  1291.     opacity: .80;
  1292.     z-index: 9999;
  1293. }
  1294. .popup_block{
  1295.     font-color:#FFF;
  1296.     display: none; /*--hidden by default--*/
  1297.     background: #000;
  1298.     padding: 20px;
  1299.     border: 20px solid #ddd;
  1300.     float: left;
  1301.     font-size: 1.2em;
  1302.     position: fixed;
  1303.     top: 50%; left: 50%;
  1304.     z-index: 99999;
  1305.     /*--CSS3 Box Shadows--*/
  1306.     -webkit-box-shadow: 0px 0px 20px #000;
  1307.     -moz-box-shadow: 0px 0px 20px #000;
  1308.     box-shadow: 0px 0px 20px #000;
  1309.     /*--CSS3 Rounded Corners--*/
  1310.     -webkit-border-radius: 10px;
  1311.     -moz-border-radius: 10px;
  1312.     border-radius: 10px;
  1313. }
  1314.  
  1315. .popup_block p {
  1316.     color:#FFF;
  1317.     text-align:left;
  1318.     float:left;
  1319. }
  1320.  
  1321. .popup_block h1 {
  1322.     color:#FFF;
  1323.     text-align:center;
  1324. }
  1325.  
  1326. .popup_block h2 {
  1327. font-size:14px;
  1328.     color:#FFF;
  1329.     text-align:left;
  1330. }
  1331.  
  1332. img.btn_close {
  1333.     float: right;
  1334.     margin: -55px -55px 0 0;
  1335. }
  1336. /*--Making IE6 Understand Fixed Positioning--*/
  1337. *html #fade {
  1338.     position: absolute;
  1339. }
  1340. *html .popup_block {
  1341.     position: absolute;
  1342. }
  1343.  
  1344. #modal_button a {
  1345. color:#000
  1346. }
  1347.  
  1348. #modal_button a:hover {
  1349. color:#fff;
  1350. }
  1351.  
  1352. #digital_guys{
  1353. float:left;
  1354. width:250px;}
  1355.  
  1356. #editorial_guys{
  1357. width:250px;
  1358. float:right;
  1359. }
  1360.  
  1361.  
  1362. #left_video_links{
  1363.     float:left;
  1364. }
  1365.  
  1366. #right_video_links{
  1367.     float:right;
  1368.     margin-right:20px;
  1369. }
  1370.  
  1371. .video_actionLink {
  1372.     display: block;
  1373.     font-size: 12px;
  1374.     font-weight: bold;
  1375.     margin: 15px 0;
  1376.     text-align: left;
  1377. }
  1378.  
  1379. #video_link_left
  1380. {
  1381. width:140px;
  1382. float:left;
  1383. }
  1384.  
  1385. #video_link_right
  1386. {
  1387. width:140px;
  1388. float:right;
  1389. }